<template>
  <div class="RegisterBox">
    <div class="directionAndGroup">
      <div class="direction">
        <div class="tipText">方向 Direction</div>
        <div class="selectDiv inputclass">
          <div class="selectDirection" @click="unfoldDirection">{{ directionTip }}</div>
          <div>
            <transition name="fade" appear>
              <ul class="optionDirection" v-show="isDirectionFold">
                <li
                  v-for="direction in directions"
                  :key="direction"
                  @click="choseDirection(direction)"
                >
                  {{ direction }}
                </li>
              </ul>
            </transition>
          </div>
          <img
            class="changeArrow"
            :src="isDirectionFold ? rightArrowImg : leftArrowImg"
            @click="changeDirectionArrowImg"
            alt=""
          />
        </div>
      </div>
      <div class="group" v-show="isGroup">
        <div class="tipText">组别 Group</div>
        <div class="selectDiv inputclass">
          <div class="selectGroup" @click="unfoldGroup">{{ groupTip }}</div>
          <div>
            <transition name="fade" appear>
              <ul class="optionGroup" v-show="isGroupFold">
                <li v-for="group in groups" :key="group" @click="choseGroup(group)">
                  {{ group }}
                </li>
              </ul>
            </transition>
          </div>
          <img
            class="changeArrow"
            :src="isGroupFold ? leftArrowImg : rightArrowImg"
            @click="changeGroupArrowImg"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="tip" v-for="registerTip in registerTips" :key="registerTip">
      <div class="tipText">{{ registerTip.tip }}</div>
      <input class="inputclass" type="text" v-model="registerTip.input" />
      <img class="icon" :src="registerTip.iconUrl" alt="" />
    </div>
    <div class="confirm">
      <button @click="submitReggister">确认</button>
    </div>
    <div class="buttonBox">
      <router-link :to="{ path: '/login' }"><button>登录</button></router-link>
      <button class="checkedButton">注册</button>
    </div>
  </div>
</template>

<script>
import {groups,registerTips} from '../../data/loginAndRegistered'
import {isQQNum,isStudentId,isPassword} from '../../utils/check'
export default {
  name: 'Registered',
  data() {
    return {
      isDirectionFold: false,
      isGroup: false,
      isGroupFold: false,
      leftArrowImg: require('@/assets/img/login&&register/左箭头.png'),
      rightArrowImg: require('@/assets/img/login&&register/右箭头.png'),
      directionTip: '开发/设计/秘书处',
      directions: ['开发', '设计', '秘书处'],
      groupTip: '组别',
      groups,
      registerTips,
    };
  },
  methods: {
    //消息弹出框
    message(message, type) {
      this.$message({
        message: message,
        showClose: true,
        type: type,
        center: true,
      });
    },
    //展开方向列表
    unfoldDirection() {
      this.isDirectionFold = !this.isDirectionFold;
    },
    //选择方向
    choseDirection(direction) {
      this.directionTip = direction;
      this.isDirectionFold = !this.isDirectionFold;
      //开发方向，展开选择组别选项
      if (this.directionTip === '开发') {
        this.isGroup = true;
      } else {
        this.isGroup = false;
      }
    },
    //修改方向icon
    changeDirectionArrowImg() {
      this.isDirectionFold = !this.isDirectionFold;
    },
    //展开组别列表
    unfoldGroup() {
      this.isGroupFold = !this.isGroupFold;
    },
    //选择开发小组
    choseGroup(group) {
      this.groupTip = group;
      this.isGroupFold = !this.isGroupFold;
    },
    //修改组别icon
    changeGroupArrowImg() {
      this.isGroupFold = !this.isGroupFold;
    },
    //提交注册
    submitReggister() {
      //方向
      let direction = this.directionTip;
      //小组
      let group = this.groupTip;
      console.log(group);
      if (direction === '设计') {
        group = '设计';
      } else if (direction === '秘书处') {
        group = '秘书处';
      } else {
        group = `适应期开发${group}`;
      }
      console.log(group);
      //[学号,姓名,密码,qq]
      let info = this.registerTips.map((value) => value.input);
      //非空判断
      if (direction === '开发/设计/秘书处') {
        this.message('请选择方向！', 'warning');
        return;
      }
      if (direction === '开发' && group === '组别') {
        this.message('请选择小组！', 'warning');
        return;
      }
      const flag = info.some((value, index) => {
        if (value === '') {
          this.message('请输入' + this.registerTips[index].tip.slice(0, 2), 'warning');
          return value === '';
        }
      });
      //格式验证
      //1.学号 10位
      if (!isStudentId(info[0])) {
        this.message('注意学号为10位数字!', 'warning');
        return;
      }
      //2.密码 8-16位
      if (!isPassword(info[2])) {
        this.message('注意密码为8-16位字母或数字!', 'warning');
        return;
      }
      //3.账号 4-11位
      if (!isQQNum(info[3])) {
        this.message('注意qq账号4-12位数字!', 'warning');
        return;
      }
      //发送注册信息
      this.$api.loginAndRegisterApi
        .register({
          name: info[1],
          stu_id: info[0],
          password: info[2],
          qq_id: info[3],
          group: group,
          direction,
        })
        .then((res) => {
          console.log(res);
          if (res.status != 200) {
            this.message(res.msg, 'error');
          } else {
            this.message('注册成功，等待管理员审核', 'success');
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
//动画过渡
.fade-enter-active,
.fade-leave-active {
  transition: all ease 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.RegisterBox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  width: 30vw;
  height: 54vh;
  margin: 0 auto;
  top: 1vh;
  background-color: rgba(#fff #fff, #fff, 0);
}
.RegisterBox div {
  width: 22vw;
}
.directionAndGroup {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.direction {
  width: 10vw !important;
}
.group {
  width: 10vw !important;
}
.selectDiv {
  //用div的样式代替select的样式
  width: 10vw !important;
  position: relative;
  height: 4vh;
}
input {
  width: 22vw;
  height: 4vh;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  color: #fff;
  padding-left: 10px;
  font-size: 0.8vw;
}
input::-webkit-input-placeholder {
  color: #fff;
  letter-spacing: 0.1vw;
}
//悬浮input边框加深
input:hover {
  border: 2.5px solid rgba(255, 255, 255, 1);
}
button {
  width: 8vw;
  height: 4.5vh;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 1); //去掉边框阴影
  outline: none;
  border-width: 1px; /*边框透明*/
  cursor: pointer;
  font-size: 1.2vw;
  letter-spacing: 0.8vw;
  text-indent: 0.8vw; //解决letter-spacing整体偏左问题
  font-weight: 500;
}
button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.confirm button {
  width: 100%;
}
.tip {
  position: relative;
}
.icon {
  width: 18px;
  height: 18px;
  position: absolute;
  right: 1vw;
  top: 4vh;
  cursor: pointer;
}
.changeArrow {
  width: 1.3vw;
  height: 1.7vh;
  position: absolute;
  left: 8.5vw;
  top: 1.2vh;
  cursor: pointer;
}
.inputclass {
  position: relative;
  top: 0.7vh;
}
.tipText {
  width: 13vw !important;
  font-size: 0.9vw;
  white-space: nowrap;
}
.buttonBox {
  display: flex;
  justify-content: space-between;
}
.checkedButton {
  background-color: rgba(255, 255, 255, 0.3);
}
.optionColor {
  background-color: transparent;
  color: #3f6eef;
}
.selectDirection,
.selectGroup {
  font-size: 0.8vw;
  padding-left: 10px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  line-height: 3.8vh;
  cursor: pointer;
  letter-spacing: 0.2vw;
  width: 10vw !important;
  height: 4vh;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.optionDirection,
.optionGroup {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 7vw;
  position: relative;
  left: -8vw;
  top: -4.5vh;
  font-size: 1vw;
  height: 10vh;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.8vw;
  //首行缩进
  text-indent: 8%;
}
.optionGroup {
  height: 29vh;
  width: 4vw;
  left: 11vw !important;
  text-align: center;
  text-indent: 0;
}
.selectDirection:hover,
.optionDirection:hover,
.selectGroup:hover,
.optionGroup:hover {
  border: 2.5px solid rgba(255, 255, 255, 1);
  cursor: pointer;
}
li {
  list-style-type: none;
}
li:hover {
  border-radius: 1vw;
  background-color: rgba(255, 255, 255, 0.4);
}
</style>
